<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:thSys="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" th:href="${#maps.containsKey(options,'ico_logo') == false ? '/static/img/favicon.ico' : options['ico_logo'] }"/>
    <link rel="stylesheet" type="text/css" href="/plugins/vali/css/main.css">
    <link rel="stylesheet" type="text/css" href="/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/plugins/toast/jquery.toast.css">
  	<title thSys:text="'后台登录'"></title>
  </head>
  <body>
  <div id="container"></div>

  <!-- Import maps polyfill -->
  <!-- Remove this when import maps will be widely supported -->
  <script async src="/static/js/es-module-shims.js"></script>

  <script type="importmap">
			{
				"imports": {
					"three": "/static/js/three/three.module.js",
					"three/addons/": "/static/js/three/addons/"
				}
			}
		</script>

  <script type="module">

    import * as THREE from 'three';

    import Stats from 'three/addons/stats.module.js';

    import { GUI } from 'three/addons/lil-gui.module.min.js';
    import { OrbitControls } from 'three/addons/OrbitControls.js';
    import { Water } from 'three/addons/Water.js';
    import { Sky } from 'three/addons/Sky.js';

    let container, stats;
    let camera, scene, renderer;
    let controls, water, sun, mesh;

    init();
    animate();

    function init() {

      container = document.getElementById( 'container' );

      //

      renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      container.appendChild( renderer.domElement );

      //

      scene = new THREE.Scene();

      camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
      camera.position.set( 30, 30, 100 );

      //

      sun = new THREE.Vector3();

      // Water

      const waterGeometry = new THREE.PlaneGeometry( 10000, 10000 );

      water = new Water(
              waterGeometry,
              {
                textureWidth: 512,
                textureHeight: 512,
                waterNormals: new THREE.TextureLoader().load( '/static/img/waternormals.jpg', function ( texture ) {

                  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

                } ),
                sunDirection: new THREE.Vector3(),
                sunColor: 0xffffff,
                waterColor: 0x001e0f,
                distortionScale: 3.7,
                fog: scene.fog !== undefined
              }
      );

      water.rotation.x = - Math.PI / 2;

      scene.add( water );

      // Skybox

      const sky = new Sky();
      sky.scale.setScalar( 10000 );
      scene.add( sky );

      const skyUniforms = sky.material.uniforms;

      skyUniforms[ 'turbidity' ].value = 10;
      skyUniforms[ 'rayleigh' ].value = 2;
      skyUniforms[ 'mieCoefficient' ].value = 0.005;
      skyUniforms[ 'mieDirectionalG' ].value = 0.8;

      const parameters = {
        elevation: 2,
        azimuth: 180
      };

      const pmremGenerator = new THREE.PMREMGenerator( renderer );
      let renderTarget;

      function updateSun() {

        const phi = THREE.MathUtils.degToRad( 90 - parameters.elevation );
        const theta = THREE.MathUtils.degToRad( parameters.azimuth );

        sun.setFromSphericalCoords( 1, phi, theta );

        sky.material.uniforms[ 'sunPosition' ].value.copy( sun );
        water.material.uniforms[ 'sunDirection' ].value.copy( sun ).normalize();

        if ( renderTarget !== undefined ) renderTarget.dispose();

        renderTarget = pmremGenerator.fromScene( sky );

        scene.environment = renderTarget.texture;

      }

      updateSun();

      //

      const geometry = new THREE.BoxGeometry( 30, 30, 30 );
      // const material = new THREE.MeshStandardMaterial( { roughness: 0 } );

      const texture = new THREE.TextureLoader().load( '/static/img/login.jpg' );
      const material = new THREE.MeshBasicMaterial( { map: texture,roughness: 0 } );

      mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );

      //

      controls = new OrbitControls( camera, renderer.domElement );
      controls.maxPolarAngle = Math.PI * 0.495;
      controls.target.set( 0, 10, 0 );
      controls.minDistance = 40.0;
      controls.maxDistance = 200.0;
      controls.update();

      //

      // stats = new Stats();
      // container.appendChild( stats.dom );

      // GUI

      // const gui = new GUI();
      //
      // const folderSky = gui.addFolder( 'Sky' );
      // folderSky.add( parameters, 'elevation', 0, 90, 0.1 ).onChange( updateSun );
      // folderSky.add( parameters, 'azimuth', - 180, 180, 0.1 ).onChange( updateSun );
      // folderSky.open();
      //
      // const waterUniforms = water.material.uniforms;
      //
      // const folderWater = gui.addFolder( 'Water' );
      // folderWater.add( waterUniforms.distortionScale, 'value', 0, 8, 0.1 ).name( 'distortionScale' );
      // folderWater.add( waterUniforms.size, 'value', 0.1, 10, 0.1 ).name( 'size' );
      // folderWater.open();

      //

      window.addEventListener( 'resize', onWindowResize );

    }

    function onWindowResize() {

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function animate() {

      requestAnimationFrame( animate );
      render();
      // stats.update();

    }

    function render() {

      const time = performance.now() * 0.001;

      mesh.position.y = Math.sin( time ) * 20 + 5;
      mesh.rotation.x = time * 0.5;
      mesh.rotation.z = time * 0.51;

      water.material.uniforms[ 'time' ].value += 1.0 / 60.0;

      renderer.render( scene, camera );

    }

  </script>
    <section class="login-plane">
      <div class="login-plane-container">
        <div class="login-plane-title">
          KuaiMaOS
          <img
                  class="login-plane-title-line"
                  src="/static/img/login_horizontal_line.png"
                  alt=""
          />
        </div>
        <form  class="login-form">
          <div>
            <input class="login-form-e" id="userName" type="text" name="userName" placeholder="用户名" autofocus>
          </div>
          <div>
            <input class="login-form-e" id="userPwd" type="password" name="userPwd" placeholder="密码">
          </div>
          <div>
            <button class="login-form-b btn btn-outline-primary btn-block" id="btn_login"  type="button" onclick="getLogin()">登录</button>
          </div>
        </form>
      </div>
    </section>
  <div th:replace="admin/module/macros :: comm" ></div>
  <script type="text/javascript">
  //回车登录事件
  $("#userPwd").keyup(function(event){
	  if(event.keyCode ==13){
		  getLogin();
	  }
	});
    function getLogin() {
        var userName=$("#userName").val();
        var userPwd=$("#userPwd").val();
        loadingText("btn_login","登录中...");
        $.ajax({
            type: "post",
            url: "/admin/getLogin",
            dataType :"json",
            async: false,
            data: {userName:userName,userPwd: userPwd},
            success:function (data) {
            	if(data.flag==true){
            		 $.toast({
                         text: data.msg,
                         heading: '提示',
                         icon: 'success',
                         showHideTransition: 'fade',
                         allowToastClose: true,
                         hideAfter: 1000,
                         stack: 1,
                         position: 'top-center',
                         textAlign: 'left',
                         loader: true,
                         loaderBg: '#ffffff',
                         afterHidden: function () {
                        	 window.location.href = "/admin/login";
                         }
                     });
            	}else{
            		loadingBack("btn_login","登录");
            		showMsg(data.msg,"error",3000);
            	}
            },error:function (data) {
            	loadingBack("btn_login","登录");
            	showMsg("登录失败","error",3000);
            }
        });
    }
  </script>
    <style>
      .login-plane {
        position: absolute;
        z-index: 9999;
        width: 450px;
        height: 350px;
        background-image: url('/static/img/login_border.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .login-plane-container {
        width: 100%;
        height: 100%;
        border-radius: 18px;
        background-color: #007eff2e;
        position: relative;
      }
      .login-plane-title {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        font-size: 35px;
        color: #fff;
        font-weight: 700;
      }
      .login-plane-title img{
        width: 50%;
      }
      .login-plane-title-line {
        width: 80%;
        position: absolute;
        bottom: 0;
      }
      .login-form{
        padding: 10px 20px;
      }
      .login-form-e {
        display: block;
        width: 100%;
        margin-top: 20px;
        font-size: 20px;
        line-height: 2;
        border: 1px solid #ffff;
        background-color: transparent;
      }

      .login-form-b {
        margin-top: 20px;
      }

    </style>
  </body>
</html>